<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <link href="//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>

  <title>Document</title>
</head>

<body>

  <div class="wrapper">
    <div class="nav">
      <div class="logo">Clean Juice</div>

      <div class="menu-links">
        <ul>
          <li>locations</li>
          <li>our menu</li>
          <li>our story</li>
          <li>meet our teem</li>
          <li>own a clean juice</li>
          <li>contact us</li>
        </ul>
      </div>

      <div class="search"><i class="fa fa-search"></i></div>

      <div class="account">my account</div>

      <div class="cart"><i class="i fa fa-shopping-cart"></i></div>
    </div>

    <div class="content">
      <div class="tagline">Find your clean juice</div>

      <div class="pages"><span>2</span>/21</div>

      <div class="title">orange</div>

      <div class="more"><a href="#">show all the juices</a></div>

      <div class="desc">
        <p>
          Your <span>healthy</span> life <br>
          starts here with us
        </p>
        <p>
          A family owned company founded with the purpose of giving your family access to clean, organic products while
          you are on the go.
        </p>
      </div>
    </div>

    <div class="juice">
      <img src="./img/juice.png" alt="">
    </div>

    <div class="leaves">
      <ul id="scene">
        <li class="layer" data-depth="-.1">
          <img src="./img/leaf01.png" alt="">
        </li>
        <li class="layer" data-depth="-.3">
          <img src="./img/leaf02.png" alt="">
        </li>
        <li class="layer" data-depth="-1.5">
          <img src="./img/leaf03.png" alt="">
        </li>
        <li class="layer" data-depth=".1">
          <img src="./img/leaf04.png" alt="">
        </li>
        <li class="layer" data-depth=".3">
          <img src="./img/leaf05.png" alt="">
        </li>
      </ul>
    </div>

    <div class="arrows">
      <button class="prev"><i class="fa fa-chevron-left"></i></button>
      <button class="next"><i class="fa fa-chevron-right"></i></button>
    </div>


  </div>
  <script>
    var scene = document.getElementById('scene');
    var parallax = new Parallax(scene);

    TweenMax.from(".logo", 1, {
      opacity: 0,
      x: -20,
      ease: Expo.easeInOut
    })

    TweenMax.staggerFrom(".menu-links ul li", 1, {
      opacity: 0,
      x: -20,
      ease: Power3.easeInOut
    }, 0.08)

    TweenMax.from(".search", 1, {
      delay: .5,
      opacity: 0,
      x: -20,
      ease: Expo.easeInOut
    })

    TweenMax.from(".account", 1, {
      delay: .6,
      opacity: 0,
      x: -20,
      ease: Expo.easeInOut
    })

    TweenMax.from(".cart", 1, {
      delay: .7,
      opacity: 0,
      x: -20,
      ease: Expo.easeInOut
    })

    TweenMax.from(".juice", 1, {
      delay: 2,
      opacity: 0,
      y: -800,
      ease: Expo.easeInOut
    })

    TweenMax.from(".leaves .layer:nth-child(1)", 2, {
      delay: 2,
      opacity: 0,
      y: -800,
      ease: Expo.easeInOut
    })

    TweenMax.from(".leaves .layer:nth-child(2)", 2, {
      delay: 2.1,
      opacity: 0,
      y: -800,
      ease: Expo.easeInOut
    })

    TweenMax.from(".leaves .layer:nth-child(3)", 2, {
      delay: 2.2,
      opacity: 0,
      y: -800,
      ease: Expo.easeInOut
    })

    TweenMax.from(".leaves .layer:nth-child(4)", 2, {
      delay: 2.3,
      opacity: 0,
      y: -800,
      ease: Expo.easeInOut
    })

    TweenMax.from(".leaves .layer:nth-child(5)", 2, {
      delay: 2.5,
      opacity: 0,
      y: -800,
      ease: Expo.easeInOut
    })

    TweenMax.from(".title", 1, {
      delay: 1,
      opacity: 0,
      y: 20,
      ease: Expo.easeInOut
    })

    TweenMax.from(".tagline", 1, {
      delay: 1.3,
      opacity: 0,
      y: 20,
      ease: Expo.easeInOut
    })

    TweenMax.from(".pages", 1, {
      delay: 1.3,
      opacity: 0,
      y: 20,
      ease: Expo.easeInOut
    })

    TweenMax.from(".more", 1, {
      delay: 1.4,
      opacity: 0,
      y: 20,
      ease: Expo.easeInOut
    })

    TweenMax.from(".desc", 1, {
      delay: 1.4,
      opacity: 0,
      y: 20,
      ease: Expo.easeInOut
    })

    TweenMax.from(".arrows", 1, {
      delay: 2,
      opacity: 0,
      ease: Expo.easeInOut
    })

  </script>
</body>

</html>